<template>
<uni-shadow-root class="partials-activitiesList-activitiesList"><block v-if="receiveData&&receiveData.androidTemplate == ''">
    
    <block v-for="(item,index) in (receiveData.relateBean)" :key="item.index" v-if="receiveData.relateBean&&receiveData.relateBean.length !=0">
        <view class="Box" @click="clickLink" :data-id="item.id" :data-promotionstatus="item.promotionStatus" :data-promotiontype="item.promotionType">
          <view class="time1">
            <view class="timeAll"> 
              <view class="timeText"> <text :style="'color:'+(defaultColor)">{{item.promotionStatus==0?"即将开始:":"距结束:"}}</text></view>
              <view class="timeBox" :style="'background-color:'+(defaultColor)"> <text>{{countDownList[index].day}}天</text></view>
              <view class="timeText"> <text :style="'color:'+(defaultColor)">:</text></view>
              <view class="timeBox" :style="'background-color:'+(defaultColor)"> <text>{{countDownList[index].hou}}</text></view>
              <view class="timeText"> <text :style="'color:'+(defaultColor)">:</text></view>
              <view class="timeBox" :style="'background-color:'+(defaultColor)"> <text>{{countDownList[index].min}}</text></view>
              <view class="timeText"> <text :style="'color:'+(defaultColor)">:</text></view>
              <view class="timeBox" :style="'background-color:'+(defaultColor)"> <text>{{countDownList[index].sec}}</text></view>
            </view>
            <view class="conn" v-if="item.promotionStatus==0"><text :style="'color:'+(defaultColor)">{{dataArr[index]}}开抢</text></view>
          </view>
          <view v-if="item.promotionBanner" class="ListDataItemImage"><image mode="aspectFill" :src="(item.promotionBanner)+'?x-oss-process=style/preview'"></image>
          </view>
        </view>
    </block>
    <block v-if="receiveData.relateBean.length==0">
        <view class="activities_noproduct">
          <image mode="widthFix" src="https://image1.sansancloud.com/xianhua/2019_12/16/15/54/55_950.jpg?x-oss-process=style/preview_120"></image>
          <text>没有相关活动</text>
        </view>
    </block>
</block></uni-shadow-root>
</template>

<script>

global['__wxRoute'] = 'partials/activitiesList/activitiesList'
const app = getApp();
Component({
  properties: {
    receiveData: {
      type: JSON,
      value: 'default value',
    }
  },
  data: {
    someData: {},
    actEndTimeList: [],
    countDownList:[],
    dataArr:[],
    setting:{}
  },

  ready: function (options) {
    var me = this;
    var oldData = me.data;
    app.globalData.consoleFun("=====activitiesList组件-data=====",[me.data.receiveData])
    me.setData({ setting: app.globalData.setting, defaultColor: app.globalData.setting.platformSetting.defaultColor})
    // 已经开始的活动
    if (oldData.receiveData.relateBean&&oldData.receiveData.relateBean.length>0&&oldData.receiveData.relateBean[0].promotionStatus == 1){
      var arr=[];
      var dataLength = oldData.receiveData.relateBean.length;
      // 循环出项目的个数,添加到arr中
      for (var a = 0; a < dataLength; a++) {
        arr.push(oldData.receiveData.relateBean[a].endDate)   
      }
      me.setData({ actEndTimeList: arr })
      var interval = setInterval(function () {
        // 获取当前时间，同时得到活动结束时间数组
        let newTime = new Date().getTime();
        let endTimeList = oldData.actEndTimeList;
        let countDownArr = [];
        // 对结束时间进行处理渲染到页面
        endTimeList.forEach(o => {
          let endTime = new Date(Date.parse(o.replace(/-/g, "/"))).getTime();
          let obj = null;
          // 如果活动未结束，对时间进行处理
          if (endTime - newTime > 0) {
            let time = (endTime - newTime) / 1000;
            let day = parseInt(time / (60 * 60 * 24));
            let hou = parseInt(time % (60 * 60 * 24) / 3600);
            let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
            let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
            obj = {
              day: this.timeFormat(day),
              hou: this.timeFormat(hou),
              min: this.timeFormat(min),
              sec: this.timeFormat(sec)
            }
          } else {
            obj = {
              day: '00',
              hou: '00',
              min: '00',
              sec: '00'
            }
          }
          countDownArr.push(obj);
        })
        this.setData({ countDownList: countDownArr })
      }.bind(this), 1000);
    }
    // 还未开始的活动
    if (oldData.receiveData.relateBean&&oldData.receiveData.relateBean.length>0&&oldData.receiveData.relateBean[0].promotionStatus == 0) {
      var arr = [];
      var dataArr=[];
      console.log(oldData.receiveData.relateBean.length);
      var dataLength = oldData.receiveData.relateBean.length;
      // 循环出项目的个数,添加到arr中
      for (var a = 0; a < dataLength; a++) {
        arr.push(oldData.receiveData.relateBean[a].startDate)
        // 开抢时间
        var aaa = oldData.receiveData.relateBean[a].startDate;
        var str = aaa.slice(5, 10); 
        var d1 = str.replace(/\-/g, "月");
        dataArr.push(d1)
      }
      me.setData({
         actEndTimeList: arr,
         dataArr: dataArr
      })
      var interval = setInterval(function () {
        // 获取当前时间，同时得到活动结束时间数组
        let newTime = new Date().getTime();
        let endTimeList = me.data.actEndTimeList;
        let countDownArr = [];
        // 对结束时间进行处理渲染到页面
        endTimeList.forEach(o => {
          let endTime = new Date(Date.parse(o.replace(/-/g, "/"))).getTime();
          let obj = null;
          // 如果活动未结束，对时间进行处理
          if (endTime - newTime > 0) {
            let time = (endTime - newTime) / 1000;
            let day = parseInt(time / (60 * 60 * 24));
            let hou = parseInt(time % (60 * 60 * 24) / 3600);
            let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
            let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
            obj = {
              day: me.timeFormat(day),
              hou: me.timeFormat(hou),
              min: me.timeFormat(min),
              sec: me.timeFormat(sec)
            }
          } else {
            obj = {
              day: '00',
              hou: '00',
              min: '00',
              sec: '00'
            }
          }
          countDownArr.push(obj);
        })
        // 渲染，然后每隔一秒执行一次倒计时函数
        me.setData({ countDownList: countDownArr })
      }.bind(me), 1000);
    }
  },

  methods: {
    timeFormat: function(param) {//小于10的格式化函数
      return param < 10 ? '0' + param : param;
    },
    clickLink: function (e) {
      let id=e.currentTarget.dataset.id;
      let promotionStatus=e.currentTarget.dataset.promotionstatus;
      let promotionType=e.currentTarget.dataset.promotiontype;
      if (promotionStatus == 1 && promotionType!=50){
          let a = "teMai.html?promotionId=" + id;
          app.globalData.linkEvent(a);
      } else if (promotionStatus == 0 || promotionType == 50) {
        let a = "promotion_detail.html?promotionId=" + id;
        app.globalData.linkEvent(a);
      }   
    },
  },
})
export default global['__wxComponents']['partials/activitiesList/activitiesList']
</script>
<style platform="mp-weixin">
.Box{
  width: 690rpx;
  height: 500rpx;
  margin: 0 auto;
  margin-top: 20rpx;
  border: 1px solid #EEE;
  border-radius: 20rpx;
  box-shadow: rgb(248, 248, 248) 4px 4px 10px;
  padding: 10rpx;
  background: #fff;
}
.time1{
  width: 690rpx;
  height: 80rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.timeAll{
  width: 450rpx;
  height: 80rpx;
  display: flex;
  flex-direction: row;
}
.timeText{
   text-align: center;
   margin-right: 5rpx; 
}
.timeText text{
  font-size: 28rpx;
  line-height: 80rpx;
  color: black;
}
.timeBox{
  width: 60rpx;
  height: 40rpx;
  background-color: black;
  margin-top: 20rpx;
  text-align: center;
  margin-right: 10rpx;
  border-radius: 10rpx;
}
.timeBox text{
  display: block;
  font-size: 20rpx;
  line-height: 40rpx; 
  color: white;
}
.timeImg{
  width: 690rpx;
  height: 420rpx;
  margin: 0 auto;
  background-repeat: no-repeat;
  position: relative;
}
.timeName{
 height: 50rpx;
 width: 120rpx;
 position: absolute;
 right: 50rpx;
 bottom: 40rpx;
 background-color: #FF5F5F;
 text-align: center;
 border-radius: 20rpx;
}
.timeName text{
  font-size: 30rpx;
  line-height: 50rpx;
  color: white;
}
/*没有相关商品  */
.activities_noproduct{
  width: 100%;
  height: 200rpx;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.activities_noproduct image{
  width: 150rpx;
  height: 150rpx;
  margin: 0 auto;
}
.activities_noproduct text{
  font-size: 30rpx;
}
.ListDataItemImage{
  width: 100%;
  height: 80%;
  overflow: hidden;
  border-radius: 0.2em;
}
.ListDataItemImage image{
  width: 100%;
  height: 100%;
}
.conn{
  width: 250rpx;
  text-align: center;
}
.conn text{
  display: block;
  font-size: 28rpx;
  line-height: 80rpx;
}
</style>